<template>
  <div class="app-container">
    <el-table
      ref="tableRef"
      v-loading="loading"
      border
      height="680"
      :data="tableData"
      style="width: 100%"
      :header-cell-style="{ background: '#f2f2f2' }"
    >
      <el-table-column prop="科室名称" label="科室名称"> </el-table-column>
      <el-table-column prop="CMI" label="CMI"> </el-table-column>
      <el-table-column prop="次均费用" label="次均费用"> </el-table-column>
      <el-table-column prop="权重" label="权重"> </el-table-column>
      <el-table-column prop="总人次" label="总人次"> </el-table-column>
      <el-table-column prop="总费用" label="总费用"> </el-table-column>
      <el-table-column
        prop="DRG标准支付总额"
        label="DRG标准支付总额"
        min-width="140"
      >
      </el-table-column>
      <el-table-column
        prop="项目结算基金支付总额"
        label="项目结算基金支付总额"
        min-width="180"
      >
      </el-table-column>
      <el-table-column prop="医保基金DRG支付总额" label="医保基金DRG支付总额">
      </el-table-column>
      <el-table-column prop="盈亏" label="盈亏额 ">
        <!-- <el-table-column prop="盈亏" label="DRG盈亏状况"> -->
        <template slot-scope="{ row }">
          <span :style="{ color: Number(row.盈亏) < 0 ? 'red' : '#333' }">{{
            row.盈亏
          }}</span>
        </template>
        <!-- </el-table-column> -->
      </el-table-column>
    </el-table>
    <!-- <div class="flex-end">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageQuery.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pageQuery.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div> -->
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { getrptrzmx } from "@/api/statistics";

@Component({
  name: "drgrzmx",
  computed: {
    filter() {
      return {
        date: {
          props: {
            options: [{ label: "结算时间", value: 0 }],
            isTwoRange: true,
            type: "daterange",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
          },
          keys: ["timeType", "kssj", "jssj"],
        },
        inline: [
          {
            props: {
              label: "科室",
              is: "el-select",
              filterable: true,
              options: this.deptList,
            },
            keys: "ksmc",
          },
          {
            props: {
              label: "关键字",
              is: "el-input",
            },
            data: {
              attrs: {
                placeholder: "drg编码/名称",
              },
            },
            keys: "keys",
          },
        ],
      };
    },
  },
})
export default class extends Vue {
  @Prop({ required: true }) private query!: any;
  private dataInfo: any = null;
  private deptList: any = [];
  private tableData: any = [];
  private loading: any = false;
  private total: any = 0;
  private pageQuery: any = {
    page: 1,
    size: 10,
    lb: 3,
  };
  private async getData() {
    try {
      this.loading = true;
      const res = await getrptrzmx({ ...this.query, ...this.pageQuery });
      this.tableData = res.data;
      // this.total = res.data.total;
      this.loading = false;
    } catch (error) {
      this.loading = false;
    }
  }

  private handleCurrentChange(val) {
    this.pageQuery.page = val;
    this.getData();
  }
  private handleSizeChange(val) {
    this.pageQuery.size = val;
    this.getData();
  }
}
</script>

<style lang="scss" scoped>
.flex-end {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>
